<template>
    <div>
        <van-nav-bar
            left-text="借阅记录"
            left-arrow
            @click-left="onClickLeft"

        />
        <div class="main">
            <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="哥，已经到底了"
            @load="onLoad"
            :offset="250"
            >
            <div v-for="item in booksArr1" style="display: flex;margin: 10px auto;">
                <div style="width: 30%;">
                  <img :src="item.img" alt="">
                </div>
                <div style="flex:1;width: 70%;font-size: 12px;">
                  <h6>我是一本书</h6>
                  <div class="TJY">借阅中</div>
                  <span>{{ item.title }}</span>
                </div>
              </div>
          </van-list>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import {getGoodsListAPI} from '@/api/goodsApi'
import IBooks from "@utils/type"
import { useRouter } from "vue-router";

let $router = useRouter()
//loading 加载状态 
let loading = ref<boolean>(false);

let finished = ref<boolean>(false);

let booksArr1:Array<IBooks> = reactive<Array<IBooks>>([])

// 点更多之后的标签页
const active1 = ref(0)

let showTabs1 = ref(true)

const onLoad = ()=>{

getGoodsListAPI({
  page:1
}).then(res=>{
  console.log(res);
  if(res.code == 200){
    booksArr1.push(...res.goodList)
    finished.value = true
    loading.value = false;
  }
})
}
// 返回
function onClickLeft() {
  $router.back();
}

</script>

<style scoped lang="less">
.main{
    margin:0 10px
}
.van-nav-bar {
  position: sticky;
  top: 0;
}
.TJY{
    width: 60px;
    height: 20px;
    background-color: orange;
    color: white;
    text-align: center;
    line-height: 20px;
}
.van-list__finished-text {
  margin-right: 87px;
}
</style>